{% extends "avatar/base.html" %}
{% load i18n avatar_tags %}
{% load url from future %}

{% block mystylesheet %}
    <link rel="stylesheet" href="{{ STATIC_URL }}css/styleMati.css" type="text/css" />
{% endblock mystylesheet%}

{% block content %}
<div class="row">
    <div class="page-header">
        <h1>Agregar una imagen</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-4 col-md-offset-2">
        <p><img src="{% avatar_url user 100 %}" alt=""></p>
        <p><strong>Foto de perfil actual</strong></p>
        <p><a class="btn btn-warning" href="{% url 'avatar_add' %}">Subir una nueva imagen</a></p>
    </div> 
    <div class="col-md-4">
        {% if not avatars %}
            <p>{% trans "You haven't uploaded an avatar yet. Please upload one now." %}</p>
        {% else %}
            <form method="POST" action="{% url 'avatar_change' %}">
                {% csrf_token %}
                {% for field in primary_avatar_form %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">Seleccionar una imagen existente</label>
                        {{ field }}
                        <span class="help-block">{{ field.errors }}</span>
                    </div>
                {% endfor %}
                <p></p>
                <div class="form-group {% if .errors %}has-error{% endif %}">
                    <input type="submit" value="Guardar" class="btn btn-success" />
                </div>
            </form>
        {% endif %}
    </div>
</div>
{% endblock %}
